<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right">                  
      </div>
    </div>
    <div class="content-wrap">
      <div class="chart-content" ref="outpatientIncomeStatistics">
        2019
      </div>                         
    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-single-analysis6-keshishuliangph',
  components:{Fragment},
  props:{
    title:{
      type:String
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    makeData(){
      const data6 = [
        {name: '1', value: 90,label:'检验总人数'},
        {name: '2', value: 92,label:'检差总人数'},
        {name: '3', value: 88,label:'放射总人数'},
        {name: '4', value: 76,label:'超声总人数'},
        {name: '5', value: 65,label:'病理总人数'},
        {name: '6', value: 60,label:'心电总人数'}
      ]
      const option6 = {
        grid: {
          left: '-10%',
          right: '1%',
          bottom: '-10%',
          top:'0%',
          containLabel: true
        },
        xAxis: {
          show: false,
        },
        yAxis: [{
          type: 'category',
          data: data6.map(item =>item.name),
          axisLine: {
            show: false
          },
          inverse: true,
          interval:1,
          axisTick: {
            show: false
          },
          axisLabel:{
            color:'#eeeeee',
            formatter:function(value,index){
              return '{idx' + '|' +  value + '}'
            },
            rich: {
              idx: {
                  color: '#ffffff',
                  backgroundColor: '#2699EB',
                  borderRadius: 100,
                  padding: [5,8],                    
              }
            }
          },
        },{
          type: "category",
          inverse: true,
          axisTick: "none",
          axisLine: "none",
          offset: -15,
          zlevel: 100,
          show: true,
          position: "left",
          
          axisLabel: {
            textStyle: {
              color: "#ffffff",
              // fontSize: "10"
              align:'left'
            }
          },
          data: data6.map(item => item.label)
        }],
        series: [
          {
            name: '2011',
            type: 'bar',
            data: data6,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(20, 50, 89, 1)',
              borderRadius: [0, 50, 50, 0]
            },
            barWidth: 20,
            itemStyle: {
              emphasis:{
                barBorderRadius:5
              },
              normal: {
                  barBorderRadius: 40,
                  color:new echarts.graphic.LinearGradient(1,1,0,0,[{
                    offset:0,
                    color:"#34AAEF"
                  },
                  {
                    offset:1,
                    color:"#0240D0"
                  }],false)
              }
            },
            label: {
              show: true,
              position: 'right',
              color: 'white',
              formatter: '{c} 人' 
            }
          }
        ]
      };
      this.makeGraph(this.$refs.outpatientIncomeStatistics,option6)

    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
    .chart-content{
      width: 100%;
      height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
      float: left;
      overflow: hidden;
    }
  }
  img{width: 100%;float: left;}
</style>